<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>link和@import的区别 | Interview</title>
    <meta name="description" content="Interview with vitePress">
    <link rel="stylesheet" href="/t-blog/assets/style.c069affc.css">
    <link rel="modulepreload" href="/t-blog/assets/Home.00b10290.js">
    <link rel="modulepreload" href="/t-blog/assets/app.a747ab4f.js">
    <link rel="modulepreload" href="/t-blog/assets/CSS_advanced.md.b4514e32.lean.js">
    <link rel="modulepreload" href="/t-blog/assets/app.a747ab4f.js">
    <link rel="icon" href="/favicon.ico">
    <meta name="twitter:title" content="link和@import的区别 | Interview">
    <meta property="og:title" content="link和@import的区别 | Interview">
  </head>
  <body>
    <div id="app"><!--[--><div class="theme"><header class="nav-bar" data-v-7161a24b><div class="sidebar-button" data-v-7161a24b><svg class="icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z" class></path></svg></div><a class="nav-bar-title" href="/t-blog/" aria-label="Interview, back to home" data-v-7161a24b data-v-4a583abe><!----> Interview</a><div class="flex-grow" data-v-7161a24b></div><div class="nav" data-v-7161a24b><nav class="nav-links" data-v-7161a24b data-v-15acbf05><!--[--><div class="item" data-v-15acbf05><div class="nav-link" data-v-15acbf05 data-v-641633f9><a class="item isExternal" href="https://www.cooldream.fun/home" target="_blank" rel="noopener noreferrer" data-v-641633f9>我的个人网站 <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-641633f9><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="item" data-v-15acbf05><div class="nav-link" data-v-15acbf05 data-v-641633f9><a class="item isExternal" href="https://juejin.cn/user/1855631359481847/posts" target="_blank" rel="noopener noreferrer" data-v-641633f9>掘金 <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-641633f9><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="item" data-v-15acbf05><div class="nav-link" data-v-15acbf05 data-v-641633f9><a class="item isExternal" href="https://github.com/Jack-Star-T" target="_blank" rel="noopener noreferrer" data-v-641633f9>Github <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-641633f9><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><!--]--><!----><!----></nav></div><!--[--><!--]--></header><aside class="sidebar" data-v-6b49cdcd><nav class="nav-links nav" data-v-6b49cdcd data-v-15acbf05><!--[--><div class="item" data-v-15acbf05><div class="nav-link" data-v-15acbf05 data-v-641633f9><a class="item isExternal" href="https://www.cooldream.fun/home" target="_blank" rel="noopener noreferrer" data-v-641633f9>我的个人网站 <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-641633f9><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="item" data-v-15acbf05><div class="nav-link" data-v-15acbf05 data-v-641633f9><a class="item isExternal" href="https://juejin.cn/user/1855631359481847/posts" target="_blank" rel="noopener noreferrer" data-v-641633f9>掘金 <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-641633f9><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="item" data-v-15acbf05><div class="nav-link" data-v-15acbf05 data-v-641633f9><a class="item isExternal" href="https://github.com/Jack-Star-T" target="_blank" rel="noopener noreferrer" data-v-641633f9>Github <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-641633f9><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><!--]--><!----><!----></nav><!--[--><!--]--><ul class="sidebar-links" data-v-6b49cdcd><!--[--><li class="sidebar-link"><p class="sidebar-link-item">HTML</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/t-blog/HTML/">基础</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/t-blog/HTML/advanced">进阶</a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item">CSS</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/t-blog/CSS/">基础</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item active" href="/t-blog/CSS/advanced">进阶</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#link和-import的区别">link和@import的区别</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#常见的图片格式及使用场景">常见的图片格式及使用场景</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#对-csssprites-的理解">对 CSSSprites 的理解</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#css预处理器是什么？为什么要使用它们">CSS预处理器是什么？为什么要使用它们</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#对-css-工程化的理解">对 CSS 工程化的理解</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#css选择器">CSS选择器</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#伪类和伪元素的区别">伪类和伪元素的区别</a><!----></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="#页面样式">页面样式</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#display-none与visibility-hidden的区别">display:none与visibility:hidden的区别</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#如何理解外边距塌陷">如何理解外边距塌陷</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#单行、多行文本溢出隐藏">单行、多行文本溢出隐藏</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#li-与-li-之间有看不见的空白间隔是什么原因引起的？如何解决？">li 与 li 之间有看不见的空白间隔是什么原因引起的？如何解决？</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#z-index属性在什么情况下会失效">z-index属性在什么情况下会失效</a><!----></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="#页面布局">页面布局</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#两栏布局的实现">两栏布局的实现</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#三栏布局的实现">三栏布局的实现</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#水平垂直居中的实现">水平垂直居中的实现</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#如何根据设计稿进行移动端适配">如何根据设计稿进行移动端适配</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#响应式设计的概念及基本原理">响应式设计的概念及基本原理</a><!----></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="#定位与浮动">定位与浮动</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#为什么需要清除浮动？清除浮动的方式">为什么需要清除浮动？清除浮动的方式</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#使用-clear-属性清除浮动的原理">使用 clear 属性清除浮动的原理</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#对bfc的理解，如何创建bfc">对BFC的理解，如何创建BFC</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#position的属性有哪些，区别是什么">position的属性有哪些，区别是什么</a><!----></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="#变形、滤镜与动画">变形、滤镜与动画</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#对requestanimationframe的理解">对requestAnimationframe的理解</a><!----></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="#场景应用">场景应用</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#实现一个三角形">实现一个三角形</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#实现一个宽高自适应的正方形">实现一个宽高自适应的正方形</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#画一条0-5px的线">画一条0.5px的线</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#设置小于12px的字体">设置小于12px的字体</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#如何解决-1px-问题">如何解决 1px 问题</a><!----></li></ul></li></ul></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item">Javascript</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/t-blog/Javascript/">基础</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/t-blog/Javascript/advanced">进阶</a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item">Vue</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/t-blog/Vue/">基础</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/t-blog/Vue/advanced">进阶</a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item">浏览器</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/t-blog/Vue/">基础</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/t-blog/Vue/advanced">进阶</a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item">网络</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/t-blog/Network/">基础</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/t-blog/Network/advanced">进阶</a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item">安全</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/t-blog/Security/">基础</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/t-blog/Security/advanced">进阶</a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item">面经</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/t-blog/Experience/">基础</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/t-blog/Experience/advanced">进阶</a><!----></li></ul></li><!--]--></ul><!--[--><!--]--></aside><!-- TODO: make this button accessible --><div class="sidebar-mask"></div><main class="page" data-v-7eddb2c4><div class="container" data-v-7eddb2c4><!--[--><!--]--><div style="position:relative;" class="content" data-v-7eddb2c4><div><h2 id="link和-import的区别"><a class="header-anchor" href="#link和-import的区别" aria-hidden="true">#</a> link和@import的区别</h2><h2 id="常见的图片格式及使用场景"><a class="header-anchor" href="#常见的图片格式及使用场景" aria-hidden="true">#</a> 常见的图片格式及使用场景</h2><h2 id="对-csssprites-的理解"><a class="header-anchor" href="#对-csssprites-的理解" aria-hidden="true">#</a> 对 CSSSprites 的理解</h2><h2 id="css预处理器是什么？为什么要使用它们"><a class="header-anchor" href="#css预处理器是什么？为什么要使用它们" aria-hidden="true">#</a> CSS预处理器是什么？为什么要使用它们</h2><h2 id="对-css-工程化的理解"><a class="header-anchor" href="#对-css-工程化的理解" aria-hidden="true">#</a> 对 CSS 工程化的理解</h2><h2 id="css选择器"><a class="header-anchor" href="#css选择器" aria-hidden="true">#</a> CSS选择器</h2><h3 id="伪类和伪元素的区别"><a class="header-anchor" href="#伪类和伪元素的区别" aria-hidden="true">#</a> 伪类和伪元素的区别</h3><h2 id="页面样式"><a class="header-anchor" href="#页面样式" aria-hidden="true">#</a> 页面样式</h2><h3 id="display-none与visibility-hidden的区别"><a class="header-anchor" href="#display-none与visibility-hidden的区别" aria-hidden="true">#</a> display:none与visibility:hidden的区别</h3><h3 id="如何理解外边距塌陷"><a class="header-anchor" href="#如何理解外边距塌陷" aria-hidden="true">#</a> 如何理解外边距塌陷</h3><h3 id="单行、多行文本溢出隐藏"><a class="header-anchor" href="#单行、多行文本溢出隐藏" aria-hidden="true">#</a> 单行、多行文本溢出隐藏</h3><h3 id="li-与-li-之间有看不见的空白间隔是什么原因引起的？如何解决？"><a class="header-anchor" href="#li-与-li-之间有看不见的空白间隔是什么原因引起的？如何解决？" aria-hidden="true">#</a> li 与 li 之间有看不见的空白间隔是什么原因引起的？如何解决？</h3><h3 id="z-index属性在什么情况下会失效"><a class="header-anchor" href="#z-index属性在什么情况下会失效" aria-hidden="true">#</a> z-index属性在什么情况下会失效</h3><h2 id="页面布局"><a class="header-anchor" href="#页面布局" aria-hidden="true">#</a> 页面布局</h2><h3 id="两栏布局的实现"><a class="header-anchor" href="#两栏布局的实现" aria-hidden="true">#</a> 两栏布局的实现</h3><h3 id="三栏布局的实现"><a class="header-anchor" href="#三栏布局的实现" aria-hidden="true">#</a> 三栏布局的实现</h3><h3 id="水平垂直居中的实现"><a class="header-anchor" href="#水平垂直居中的实现" aria-hidden="true">#</a> 水平垂直居中的实现</h3><h3 id="如何根据设计稿进行移动端适配"><a class="header-anchor" href="#如何根据设计稿进行移动端适配" aria-hidden="true">#</a> 如何根据设计稿进行移动端适配</h3><h3 id="响应式设计的概念及基本原理"><a class="header-anchor" href="#响应式设计的概念及基本原理" aria-hidden="true">#</a> 响应式设计的概念及基本原理</h3><h2 id="定位与浮动"><a class="header-anchor" href="#定位与浮动" aria-hidden="true">#</a> 定位与浮动</h2><h3 id="为什么需要清除浮动？清除浮动的方式"><a class="header-anchor" href="#为什么需要清除浮动？清除浮动的方式" aria-hidden="true">#</a> 为什么需要清除浮动？清除浮动的方式</h3><h3 id="使用-clear-属性清除浮动的原理"><a class="header-anchor" href="#使用-clear-属性清除浮动的原理" aria-hidden="true">#</a> 使用 clear 属性清除浮动的原理</h3><h3 id="对bfc的理解，如何创建bfc"><a class="header-anchor" href="#对bfc的理解，如何创建bfc" aria-hidden="true">#</a> 对BFC的理解，如何创建BFC</h3><h3 id="position的属性有哪些，区别是什么"><a class="header-anchor" href="#position的属性有哪些，区别是什么" aria-hidden="true">#</a> position的属性有哪些，区别是什么</h3><h2 id="变形、滤镜与动画"><a class="header-anchor" href="#变形、滤镜与动画" aria-hidden="true">#</a> 变形、滤镜与动画</h2><h3 id="对requestanimationframe的理解"><a class="header-anchor" href="#对requestanimationframe的理解" aria-hidden="true">#</a> 对requestAnimationframe的理解</h3><h2 id="场景应用"><a class="header-anchor" href="#场景应用" aria-hidden="true">#</a> 场景应用</h2><h3 id="实现一个三角形"><a class="header-anchor" href="#实现一个三角形" aria-hidden="true">#</a> 实现一个三角形</h3><h3 id="实现一个宽高自适应的正方形"><a class="header-anchor" href="#实现一个宽高自适应的正方形" aria-hidden="true">#</a> 实现一个宽高自适应的正方形</h3><h3 id="画一条0-5px的线"><a class="header-anchor" href="#画一条0-5px的线" aria-hidden="true">#</a> 画一条0.5px的线</h3><h3 id="设置小于12px的字体"><a class="header-anchor" href="#设置小于12px的字体" aria-hidden="true">#</a> 设置小于12px的字体</h3><h3 id="如何解决-1px-问题"><a class="header-anchor" href="#如何解决-1px-问题" aria-hidden="true">#</a> 如何解决 1px 问题</h3></div></div><footer class="page-footer" data-v-7eddb2c4 data-v-fb8d84c6><div class="edit" data-v-fb8d84c6><div class="edit-link" data-v-fb8d84c6 data-v-1ed99556><!----></div></div><div class="updated" data-v-fb8d84c6><!----></div></footer><div class="next-and-prev-link" data-v-7eddb2c4 data-v-38ede35f><div class="container" data-v-38ede35f><div class="prev" data-v-38ede35f><a class="link" href="/t-blog/CSS/" data-v-38ede35f><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon icon-prev" data-v-38ede35f><path d="M19,11H7.4l5.3-5.3c0.4-0.4,0.4-1,0-1.4s-1-0.4-1.4,0l-7,7c-0.1,0.1-0.2,0.2-0.2,0.3c-0.1,0.2-0.1,0.5,0,0.8c0.1,0.1,0.1,0.2,0.2,0.3l7,7c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4L7.4,13H19c0.6,0,1-0.4,1-1S19.6,11,19,11z"></path></svg><span class="text" data-v-38ede35f>基础</span></a></div><div class="next" data-v-38ede35f><a class="link" href="/t-blog/Javascript/" data-v-38ede35f><span class="text" data-v-38ede35f>基础</span><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon icon-next" data-v-38ede35f><path d="M19.9,12.4c0.1-0.2,0.1-0.5,0-0.8c-0.1-0.1-0.1-0.2-0.2-0.3l-7-7c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l5.3,5.3H5c-0.6,0-1,0.4-1,1s0.4,1,1,1h11.6l-5.3,5.3c-0.4,0.4-0.4,1,0,1.4c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3l7-7C19.8,12.6,19.9,12.5,19.9,12.4z"></path></svg></a></div></div></div><!--[--><!--]--></div></main></div><!----><!--]--></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"index.md\":\"9526c2f8\",\"css_advanced.md\":\"b4514e32\",\"css_index.md\":\"1886c3ca\",\"html_advanced.md\":\"3c922e72\",\"html_index.md\":\"dbc74871\",\"javascript_advanced.md\":\"338d31ad\",\"javascript_index.md\":\"71bdd912\"}")</script>
    <script type="module" async src="/t-blog/assets/app.a747ab4f.js"></script>
  </body>
</html>